<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm login-box"
    >
      <h2>登录</h2>
      <div class="chose">
        <a @click="isStudent" ref="stu" class="active">
          学生
          <span></span>
        </a>
        <a @click="isTeacher" ref="teacher">
          讲师
          <span></span>
        </a>
      </div>
      <div class="close">
        <i @click="closeLogin" class="iconfont">&#xe614;</i>
      </div>
      <el-form-item class="form-item" prop="phone">
        <el-input placeholder="手机号" type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item class="form-item" prop="pass">
        <el-input placeholder="密码" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item class="form-item code" prop="code">
        <div @click="changeCode" class="code-img">
          <img :src="codeSrc" />
        </div>
        <el-input maxlength="4" placeholder="验证码" v-model="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item class="form-item fujia">
        <el-checkbox style="float: left" v-model="ruleForm.autoLogin">7天自动登录</el-checkbox>
        <div class="forget">忘记密码</div>
      </el-form-item>
      <el-form-item>
        <el-button class="submit" type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Input, Form, FormItem, Button, Checkbox, Message } from "element-ui";
import { login } from "@/api/common";
export default {
  data() {
    const checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      } else if (!value.match(/^[a-zA-Z0-9]{4}$/)) {
        return callback(new Error("验证码为4位字母或数字"));
      }
      return callback();
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!value.match(/^1[34578]\d{9}$/)) {
        callback(new Error("目前仅支持11位中国大陆手机号"));
      }
      return callback();
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!value.match(/^[a-zA-Z0-9_-]{6,18}$/)) {
        callback(new Error("密码必须为6-18个字母、数字或下划线组合"));
      }
      return callback();
    };
    return {
      Identity: "S",
      codeSrc: "http://59.110.166.224/mooc/captcha/show.php",
      ruleForm: {
        phone: "",
        pass: "",
        code: "",
        autoLogin: false
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let formData = new FormData();
          formData.append("tel", this.ruleForm.phone);
          formData.append("password", this.ruleForm.pass);
          formData.append("captcha", this.ruleForm.code);
          formData.append("remember", this.ruleForm.autoLogin ? 1 : 0);
          formData.append("Identity", this.Identity);
          console.log(formData);
          login(formData).then(res => {
            if (res.status === 200) {
              const data = res.data;
              if (data.status === 200) {
                const identity = data.result.s_img.Identity;
                const userImg = data.result.s_img.photo;
                if (identity === "S") {
                  this.$store.dispatch("student/changeInfo", {
                    userImg
                  });
                }
                if (identity === "T") {
                  this.$store.dispatch("teacher/changeInfo", {
                    userImg
                  });
                }
                this.$store.dispatch("login/loginStatus", {
                  loginStatus: 1,
                  identity
                });
                Message.success("登录成功");
                // this.$store.dispatch("login/toggleLogin");
                this.$router.push("home");
              } else {
                this.changeCode();
                Message.error(data.result.msg);
              }
            } else {
              Message.error("服务器异常，请稍后再试");
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    closeLogin() {
      this.$store.commit("login/toggleLogin");
    },
    changeCode() {
      this.codeSrc = this.codeSrc + `?time=${Date()}`;
    },
    isStudent() {
      this.Identity = "S";
      this.$refs.stu.classList.add("active");
      this.$refs.teacher.classList.remove("active");
    },
    isTeacher() {
      this.Identity = "T";
      this.$refs.teacher.classList.add("active");
      this.$refs.stu.classList.remove("active");
    }
  },
  components: {
    ElInput: Input,
    ElForm: Form,
    ElFormItem: FormItem,
    ElButton: Button,
    ElCheckbox: Checkbox
  }
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .login {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 99;
    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        transform: rotate(90deg);
        color: red;
      }
    }
    .login-box {
      box-sizing: border-box;
      width: 420px;
      height: 440px;
      border: 1px solid rgba(28, 31, 33, 0.1);
      background-color: #fff;
      position: absolute;
      left: 50%;
      margin-left: -195px;
      top: 20%;
      box-shadow: 0 12px 24px 0 rgba(28, 31, 33, 0.1);
      border-radius: 12px;
      padding: 35px;
      h2 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
        color: #8ac641;
        text-indent: 50px;
        letter-spacing: 50px;
      }
      .chose {
        float: left;
        overflow: hidden;
        position: relative;
        z-index: 2;
        margin-bottom: 10px;
        a {
          float: left;
          transition: all 0.2s;
          width: 40px;
          height: 50px;
          font-size: 18px;
          margin-right: 20px;
          color: #777;
          text-align: center;
          cursor: pointer;
          &:hover {
            color: #8ac641;
          }
          span {
            margin-left: 10px;
            display: none;
            margin-top: 10px;
            width: 20px;
            height: 5px;
            background-color: #409eff;
            border-radius: 5px;
          }
        }
        a.active {
          float: left;
          width: 40px;
          height: 50px;
          font-size: 18px;
          margin-right: 20px;
          color: #8ac641;
          text-align: center;
          span {
            margin-left: 10px;
            display: block;
            margin-top: 10px;
            width: 20px;
            height: 5px;
            background-color: #8ac641;
            border-radius: 5px;
          }
        }
      }
      .form-item {
        margin-bottom: 20px;
        input {
          line-height: normal;
        }
      }
      .fujia {
        margin-top: -10px;
        .forget {
          float: right;
          color: #777;
          margin-right: 10px;
          cursor: pointer;
          transition: all 0.2s;
          &:hover {
            color: #409eff;
          }
        }
      }
      .code {
        position: relative;
        &-img {
          position: absolute;
          z-index: 1;
          right: 80px;
          width: 40px;
          height: 34px;
          top: 50%;
          margin-top: -17px;
          img {
            height: 100%;
            border-radius: 5px;
          }
        }
      }
      .submit {
        width: 100%;
        text-indent: 20px;
        letter-spacing: 20px;
        font-size: 16px;
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .login {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        transform: rotate(90deg);
        color: red;
      }
    }
    .login-box {
      box-sizing: border-box;
      width: 420px;
      height: 440px;
      border: 1px solid rgba(28, 31, 33, 0.1);
      background-color: #fff;
      position: absolute;
      left: 50%;
      margin-left: -195px;
      top: 20%;
      box-shadow: 0 12px 24px 0 rgba(28, 31, 33, 0.1);
      border-radius: 12px;
      padding: 35px;
      h2 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
        color: #8ac641;
        text-indent: 50px;
        letter-spacing: 50px;
      }
      .chose {
        float: left;
        overflow: hidden;
        position: relative;
        z-index: 2;
        margin-bottom: 10px;
        a {
          float: left;
          transition: all 0.2s;
          width: 40px;
          height: 50px;
          font-size: 18px;
          margin-right: 20px;
          color: #777;
          text-align: center;
          cursor: pointer;
          &:hover {
            color: #8ac641;
          }
          span {
            margin-left: 10px;
            display: none;
            margin-top: 10px;
            width: 20px;
            height: 5px;
            background-color: #409eff;
            border-radius: 5px;
          }
        }
        a.active {
          float: left;
          width: 40px;
          height: 50px;
          font-size: 18px;
          margin-right: 20px;
          color: #8ac641;
          text-align: center;
          span {
            margin-left: 10px;
            display: block;
            margin-top: 10px;
            width: 20px;
            height: 5px;
            background-color: #8ac641;
            border-radius: 5px;
          }
        }
      }
      .form-item {
        margin-bottom: 20px;
        input {
          line-height: normal;
        }
      }
      .fujia {
        margin-top: -10px;
        .forget {
          float: right;
          color: #777;
          margin-right: 10px;
          cursor: pointer;
          transition: all 0.2s;
          &:hover {
            color: #409eff;
          }
        }
      }
      .code {
        position: relative;
        &-img {
          position: absolute;
          z-index: 1;
          right: 80px;
          width: 40px;
          height: 34px;
          top: 50%;
          margin-top: -17px;
          img {
            height: 100%;
            border-radius: 5px;
          }
        }
      }
      .submit {
        width: 100%;
        text-indent: 20px;
        letter-spacing: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>

<style lang="scss">
.login {
  .login-box {
    .form-item {
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            line-height: none;
          }
        }
      }
      margin-bottom: 20px;
      input {
        line-height: normal;
      }
    }
  }
}
</style>
